<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<base href="${BaseContext }">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>视频列表 -视频管理</title>
	<script src="/static/js/jquery-1.8.3.min.js"></script>
	<script src="/static/js/jquery.js"></script>
	<script src="/static/js/bootstrap.min.js"></script>
	<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">视频管理系统</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li ><a href="/behind/video/listVideo.jsp">视频管理</a></li>
					<li class="active"><a href="/behind/video/speaker.jsp">主讲人管理</a></li>
					<li ><a href="/behind/video/classManage.jsp">课程管理</a></li>
				</ul>
			</div>
			<!--/.nav-collapse -->
		</div>
	</nav>

	<div class="container">
		<div class="jumbotron">
			<h2>编辑视频 - 视频管理</h2>
		</div>

		<form class="form-horizontal" action="#"
			method="POST" enctype="multipart/form-data" id="formOne">
			<div class="form-group">
				<label for="Title" class="col-sm-2 control-label">视频标题</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" name="title"
						id="title" placeholder="视频标题">
				</div>
			</div>

			<div class="form-group">
				<label for="speakerName" class="col-sm-2 control-label">主讲人</label>
				<div class="col-sm-10">
					<select name="speakerName" class="form-control" id="speakerId">
						
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="courseTitle" class="col-sm-2 control-label">所属课程</label>
				<div class="col-sm-10">
					<select name="courseTitle" class="form-control" id="courseId">
						
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="playTime" class="col-sm-2 control-label">视频时长</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" name="playTime"
						id="playTime" placeholder="视频时长">
				</div>
			</div>
			<div class="form-group">
				<label for="imgUrl" class="col-sm-2 control-label">封面图片</label>
				<div class="col-sm-10">
					<input type="file" class="form-control" name="image" id="imageUrl" onchange="fileUpLoadImage()">
					<img href="" id="image" name = "imageUrl" width="100px" height="100px">
				</div>
			</div>

			<div class="form-group">
				<label for="videoUrl" class="col-sm-2 control-label">上传视频</label>
				<div class="col-sm-10">
					<input type="file" class="form-control" name ="video" onchange="fileUpLoadVideo()">
					<video href="" id="video" controls="controls" name = "videoUrl"></video>
				</div>
			</div>

			<div class="form-group">
				<label for="playNum" class="col-sm-2 control-label">视频次数</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" name="playNum" id="playNum"
						placeholder="播放次数" />
				</div>
			</div>

			<div class="form-group">
				<label for="videoDescription" class="col-sm-2 control-label">简介</label>
				<div class="col-sm-10">
					<textarea class="form-control" name="detail"
						id="detail" rows="3"></textarea>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn  btn-primary" id="sub">保存</button>
					<a href="/behind/video/listVideo.jsp" class="btn btn-default">返回列表</a>
				</div>
			</div>
		</form>

	</div>
<script>
    function fileUpLoadImage() {
        var formData = new FormData($("#formOne")[0]);
        $.ajax({
            url: '/video/fileuploadImage',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                $("#image").attr("src", data.data);
            }
        });
    }
    function fileUpLoadVideo() {
        var formData = new FormData($("#formOne")[0]);
        $.ajax({
            url: '/video/fileuploadVideo' ,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                $("#video").attr("src",data.data);
                $("#video").attr("poster",data.data);
                let end = data.data.substring(data.data.indexOf(".")+1);
                console.log(end)

            }
        });
    }
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
	$(function () {
		let id = GetQueryString("id");
		$.ajax({
			url:"/video/"+id,
			type:"POST",
			success : function (data) {
                $.each(data.data[1],function (index,obj) {
                    $("#speakerId").append("<option value=\""+obj.id+"\">"+obj.speakerName+"</option>");
                });
                $.each(data.data[2],function (index,obj) {
                    $("#courseId").append("<option value=\""+obj.id+"\">"+obj.courseTitle+"</option>");
                });
                $("#title").val(data.data[0].title);
                $("#playTime").val(data.data[0].time);
                $("#image").attr("src",data.data[0].imageUrl);
                $("#video").attr("src",data.data[0].videoUrl);
                $("#playNum").val(data.data[0].playNum);
                $("#detail").val(data.data[0].detail);
                $("#speakerId").val(data.data[0].spearkerId);
                $("#courseId").val(data.data[0].courseId);
                console.log(data.data[0])
            }
		});
    });
    $("#sub").click(function () {
        let id = GetQueryString("id");
		let json = {"title":$("#title").val(),"time":$("#playTime").val(),"imageUrl":$("#image").attr("src")
		,"videoUrl":$("#video").attr("src"),"playNum":$("#playNum").val(),"detail":$("#detail").val(),
		"spearkerId":$("#speakerId").val(),"courseId":$("#courseId").val()};
		console.log(json);
        $.ajax({
			url:"/video/"+id,
			type:"PUT",
			data:JSON.stringify(json),
            contentType:"application/json",
			success:function (data) {
				window.location = "/behind/video/listVideo.jsp";
            }
		});
		return false;
    });
</script>

</body>
</html>